<template>
  <div>
    <!-- //!#3 模板中会对 ref 数据自动解包（会自动加 .value） -->
    <p>count: {{count}}</p>
    <button @click="increment">add</button>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  setup () {
    // !#1 ref 可以保证任意类型为响应式的【对象】
    const count = ref(1)
    const increment = () => {
      // !#2 使用 ref 数据的时候，在 JS 中要加 .value
      count.value++
    }
    return {
      count,
      increment
    }
  }
}
</script>

<style lang="scss" scoped>

</style>